<script setup>
import { ref, onMounted } from 'vue'
import { getfriends } from '@/api/user'
import { Search } from '@element-plus/icons-vue'
import search from './search/search.vue'
const loading = ref(true)
const total = ref(0)
const allData = ref([])
const friendsList = ref([])

// 分页参数
const params = ref({
  num: 10,
  page: 1, // 翻页
  source: '人民日报' // 指定来源
})

  // 发送的请求参数
  const param = ref({
    num: 50,
    key: '3bf88bb80ec4f87148005b202db4d15d',
    word: '上海', // 搜索关键字
  })

// 请求数据
const getFriendsList = async () => {
  try {
    const response = await getfriends(param.value);
    console.log('完整响应:', response); // 打印完整响应对象
    if (response && response.code === 200) {
      allData.value = response.result.newslist;
      total.value = response.result.allnum; // 更新总数据条数
      updatePagination(); // 更新分页数据
    } else {
      console.error('请求成功，但返回的数据结构异常:', response);
    }
  } catch (error) {
    console.error('请求失败：', error);
  }
  loading.value = false;
};

// 更新分页数据
const updatePagination = () => {
  const start = (params.value.page - 1) * params.value.num;
  const end = start + params.value.num;
  // console.log('start:', start, 'end:', end); // 打印分页范围
  friendsList.value = allData.value.slice(start, end); // 截取当前页数据
  // console.log('friendsList:', friendsList.value); // 打印当前页数据
};

onMounted(() => {
  getFriendsList();
});

const onSizeChange = (num) => {
  // console.log('onSizeChange:', num)
  params.value.num = num
  params.value.page = 1
  updatePagination() // 更新分页数据
};

const onCurrentChange = (page) => {
  // console.log('onCurrentChange:', page)
  params.value.page = page
  updatePagination()
}

// 监听子组件search事件，更新搜索关键字并重新请求数据
const handleSearch = (newWord) => {
  param.value.word = newWord
  params.value.page = 1
  getFriendsList()

}

</script>

<template>
  <div class="wrapper">
    <div class="header">
      <h3>新闻列表</h3>
      <search :word="param.word"  @get-word="param.word = $event"></search>
    </div>



    <el-table :data="friendsList" v-loading="loading" height="px">
      <el-table-column label="时间" prop="ctime" header-align="center" align="center"></el-table-column>
      <el-table-column label="标题" prop="title" show-overflow-tooltip header-align="center" align="center"></el-table-column>
      <el-table-column label="内容" prop="source" show-overflow-tooltip header-align="center" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default>
          <el-button link type="primary" @click="editClick">编辑</el-button>
          <el-button link type="primary" @click="delClick">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.num"
      :page-sizes="[2, 3, 5, 10,30]"
      :background="true"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  margin: 0 auto;
  width: 1500px;
  .header {
    display: flex;
    justify-content: space-between;

  }
}
</style>
